<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title>卡券兑换</title>
  </head>

  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script>
      // 获取页面的容器元素
      var container = document.getElementById('app');

      // 定义一个媒体查询字符串
      var mediaQuery = '(min-width: 451px)';

      // 创建一个MediaQueryList对象
      var mql = window.matchMedia(mediaQuery);

      // 定义一个函数，根据媒体查询结果来改变页面样式
      function handleMediaChange(mql) {
        console.log(mql);
        if (mql.matches) {
          // 如果屏幕宽度大于450px，就设置最大宽度为450px，并且居中显示
          container.style.maxWidth = '450px';
          container.style.margin = '0 auto';
        } else {
          // 如果屏幕宽度小于等于450px，就取消最大宽度和居中显示
          container.style.maxWidth = 'none';
          container.style.margin = '0';
        }
      }

      // 调用函数，初始化页面样式
      handleMediaChange(mql);

      // 监听媒体查询变化，更新页面样式
      mql.addListener(handleMediaChange);
    </script>
  </body>
</html>
